<template>
  <el-dialog v-model="dialogVisible" title="上传附件" width="500">
    <el-form
      :model="fileForm"
      ref="fileFormRef"
      label-width="auto"
      v-loading="loading"
    >
      <el-form-item
        label="选择附件"
        prop="url"
        :rules="[
          {
            required: true,
            message: '请选择',
            trigger: 'blur',
          },
        ]"
      >
        <el-upload
          v-model:file-list="fileList"
          ref="upload"
          drag
          action="#"
          :limit="1"
          :on-exceed="handleExceed"
          :auto-upload="false"
          :on-change="onChange"
          class="w-full"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">拖拽到这里 <em>上传附件</em></div>
          <template #tip>
            <div class="el-upload__tip">文件大小不得超过30M</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="onAppend(fileFormRef)"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import api from "@/api";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
const emit = defineEmits(["refresh"]);

const dialogVisible = ref<boolean>(false);
const loading = ref(false);
const upload = ref();
const fileFormRef = ref();
const fileForm = ref<any>({
  week: "",
  url: "",
  userAcc: localStorage.getItem("userAcc") as string,
});
const fileList = ref([]);

watch(dialogVisible, (bool) => {
  if (!bool) {
    fileForm.value = {
      week: "",
      url: "",
      userAcc: "",
    };
    fileList.value = [];
    fileFormRef.value.clearValidate();
  }
});

const handleExceed = (files: any) => {
  upload.value.clearFiles();
  const file = files[0];
  upload.value.handleStart(file);
};

// 改变上传文件
const onChange = (file: any) => {
  let fd = new FormData();
  fd.append("file", file.raw);
  loading.value = true;
  api.file
    .uploadFile(fd)
    .then((res: any) => {
      fileForm.value.url = res.message;
      fileFormRef.value.clearValidate();
      loading.value = false;
    })
    .catch(() => {
      fileList.value = [];
      fileFormRef.value.clearValidate();
      loading.value = false;
    });
};

function onAppend(formEl: FormInstance | undefined) {
  if (!formEl) return;
  //@ts-ignore
  formEl.validate((valid) => {
    if (valid) {
      api.file.insertFile(fileForm.value).then((res: any) => {
        ElMessage({
          message: res.message,
          type: res.success ? "success" : "error",
          grouping: true,
          showClose: true,
        });
        if (res.success) {
          emit("refresh");
          dialogVisible.value = false;
        }
      });
    }
  });
}

const open = (row: any) => {
  dialogVisible.value = true;
};

defineExpose({ open });
</script>
